<template>
	<view class="edit-address">
        <text class="edit-address-title">
            {{ row.id?'修改':'添加' }}收货地址
        </text>
        <uv-form labelPosition="left" :model="userInfo" :rules="rules" ref="form">
			<uv-form-item label="收货人" prop="name" borderBottom labelWidth="72">
				<uv-input v-model="userInfo.name" border="none">
				</uv-input>
			</uv-form-item>
            <uv-form-item label="联系电话" prop="mobile" borderBottom labelWidth="72">
				<uv-input v-model="userInfo.mobile" border="none">
				</uv-input>
			</uv-form-item>
            <uv-form-item label="选择地区" prop="pickerValue" borderBottom labelWidth="72">
				<uv-input v-model="userInfo.pickerValue" border="none" :aria-readonly="true">
				</uv-input>
                <template v-slot:right>
					<uv-switch v-model="userInfo.defaultValue"></uv-switch>
				</template>
			</uv-form-item>
            <uv-form-item label="详细地址" prop="address" borderBottom labelWidth="72">
				<uv-input v-model="userInfo.address" border="none">
				</uv-input>
			</uv-form-item>
            <uv-form-item label="设为默认地址" prop="defaultValue" labelWidth="102">
				<template v-slot:right>
					<uv-switch v-model="userInfo.defaultValue"></uv-switch>
				</template>
			</uv-form-item>
			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
		</uv-form>
		<uv-input border="surround" type="number" maxLength="11" style="margin:16px 0" placeholder="手机号码" prefixIcon="phone" v-model="mobile">		
		</uv-input>
        <uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="name" @change="change" @confirm="confirmChange">
		</uv-picker>
        <uv-button shape="circle" type="primary" @click="sureOtherAuth" :disabled="(!mobile && !code)">确认登录</uv-button>
	</view>
</template>
<script setup lang="ts">
import { ref , defineProps , withDefaults,computed,defineExpose} from 'vue'
interface Props {
  row: Object,
}
const props = withDefaults(defineProps<Props>(), {
    row: 0
})

const userInfo = ref<any>({
    name:'',
    mobile:'',
    pickerValue:[],
    address:'',
    area:'',
    defaultValue:false
})

const rules = ref<any>({
    'name': {
        type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change']
    },
    'mobile': {
        type: 'string',
        required: true,
        message: '请填写联系电话',
        trigger: ['blur', 'change']
    },
    'address': {
        type: 'string',
        required: true,
        message: '请填写详细地址',
        trigger: ['blur', 'change']
    },
})
const picker = ref()
const provinces = ref<any>([])//省
const citys = ref<any>([])//省
const areas = ref<any>([])//省
const loading = ref<any>(false)
const defaultValue = ref<any>([3442, 1, 2])
const addressList = computed(() => {
    return [provinces, citys, areas];
})
const change = (e : any) => {
    if (loading.value) return;
    const { columnIndex, index, indexs } = e
    // 改变了省
    if (columnIndex === 0) {
        citys.value = provinces.value[index]?.children || []
        areas.value = citys.value[0]?.children || []
        picker.value.setIndexs([index, 0, 0],true)
    } else if (columnIndex === 1) {
        areas.value = citys.value[index]?.children || []
        picker.value.setIndexs(indexs,true)
    }
}
const handlePickValueDefault = () => {
    const {pickerValue} = userInfo.value
    // 设置省
    pickerValue[0] = provinces.value.findIndex(item => Number(item.id) === defaultValue.value[0]);
    // 设置市
    citys.value = provinces.value[pickerValue.value[0]]?.children || [];
    pickerValue[1] = citys.value.findIndex(item => Number(item.id) === defaultValue.value[1]);
    // 设置区
    areas.value = citys.value[pickerValue.value[1]]?.children || [];
    pickerValue.value[2] = areas.value.findIndex(item => Number(item.id) === defaultValue.value[2]);
    // 重置下位置
    picker.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]],true);
}
const openChoose = () => {
    picker.value.open();
    handlePickValueDefault()
}
const confirmChange = (e : any) => {

    uni.showToast({
        icon: 'none',
        title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
    })
}
const acceptParams = (params : any) => {

};

defineExpose({
    acceptParams
})
</script>
<style>
.edit-address{
    padding:16px;
}
.edit-address-title{
    font-size:16px;
    font-weight: 600;
    padding:0px 0 32px 0;
    display: block;
}
.edit-address .uv-input{
    background: #fff !important;
    border: 0 !important;
    margin: 16px 0 !important;
    padding:16px !important;
}
.edit-address .uv-input .uv-button-wrapper{margin: 0px !important}
</style>